<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/common.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:t="http://myfaces.apache.org/tomahawk">

    <ui:define name="title">
        Event-Create
    </ui:define>
    <ui:define name="head">
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript">
            $(function() {
                $(".c1").datepicker({
                    dateFormat: 'dd-mm-yy',
                    changeMonth: true,
                    changeYear: true
                });
            });
        </script>
    </ui:define>
    <ui:define name="pageheader">
        Event create
    </ui:define>

    <ui:define name="content">
        <table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
            <tr>
                <th rowspan="3" class="sized"><img src="images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
                <th class="topleft"></th>
                <td id="tbl-border-top">&nbsp;</td>
                <th class="topright"></th>
                <th rowspan="3" class="sized"><img src="images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
            </tr>
            <tr>
                <td id="tbl-border-left"></td>
                <td>
                    <!--  start content-table-inner -->
                    <div id="content-table-inner">

                        <table border="0" width="100%" cellpadding="0" cellspacing="0">
                            <tr valign="top">
                                <td>


                                    <!--  start step-holder -->
                                    <div id="step-holder">
                                        <div class="step-no">1</div>
                                        <div class="step-dark-left"><a href="">Add event details</a></div>
                                        <div class="step-dark-right">&nbsp;</div>

                                        <div class="step-no-off">2</div>
                                        <div class="step-light-left">Confirm</div>
                                        <div class="step-light-round">&nbsp;</div>
                                        <div class="clear"></div>
                                    </div>
                                    <!--  end step-holder -->

                                    <!-- start id-form -->
                                    <h:form >
                                        <table border="0" cellpadding="0" cellspacing="0"  id="id-form">
                                            <tr>
                                                <th valign="top">Name:</th>
                                                <!--<td><input type="text" class="inp-form-error" /></td>-->
                                                <td>
                                                    <h:inputText required="true" value="#{eventManager.currEvent.name}" styleClass="inp-form" />
                                                </td>

                                            </tr>

                                            <tr>
                                                <th valign="top">Place:</th>
                                                <!--<td><input type="text" class="inp-form-error" /></td>-->
                                                <td>
                                                    <h:inputText value="#{eventManager.currEvent.place}" styleClass="inp-form" />
                                                </td>

                                            </tr>
                                            <tr>
                                                <th valign="top">Start date</th>
                                                <!--<td><input type="text" class="inp-form-error" /></td>-->
                                                <td>
                                                    <h:inputText  id="dpBirth" value="#{eventManager.stStartDate}"  styleClass="inp-form c1" />

                                                    <!--<t:inputCalendar />-->
                                                </td>

                                            </tr>
                                            <tr>
                                                <th valign="top">End date</th>
                                                <td>
                                                    <h:inputText   value="#{eventManager.stEndDate}" styleClass="inp-form" />
                                                </td>

                                            </tr>
                                            <tr>
                                                <th valign="top">Description</th>
                                                <td>
                                                    <h:inputText   value="#{eventManager.currEvent.description }" styleClass="inp-form" />
                                                </td>

                                            </tr>
                                            <tr>
                                                <th>&nbsp;</th>
                                                <td valign="top">
                                                    <h:commandButton value="Create" action="#{eventManager.docreate}" styleClass="btn submit-login" />


                                                </td>
                                                <td></td>
                                            </tr>

                                        </table>
                                    </h:form>
                                    <h:form>  

                                        <p:growl id="growl" showDetail="true" sticky="true" />  

                                        <p:panel header="Growl">  
                                            <h:panelGrid columns="2">  
                                                <h:outputText value="Your Name: *" />   
                                                <p:inputText  required="false" label="Name"/>  
                                            </h:panelGrid>  

                                            <p:commandButton value="Save"  actionListener="#{eventManager.test}" update="growl"/>  
                                        </p:panel>  

                                    </h:form> 
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </ui:define>

</ui:composition>
